<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h5>普通文本框双向绑定</h5>
<div id="app">
  input：<input v-model="message">{{message}}
</div>
<p style="background-color: pink"></p>

<h5>文本域双向绑定</h5>
<div id="app1">
    textarea：<textarea v-model="message"></textarea>{{message}}
</div>
<p style="background-color: pink"></p>
<h5>单选框双向绑定</h5>
<div id="app2">
    radio：<input type="radio" value="男" v-model="checked">男
    <input type="radio" value="女" v-model="checked">女
    <p>上面选中了谁：{{checked}}</p>
</div>
<p style="background-color: pink"></p>

<h5>复选框双向绑定</h5>
<div id="app3">
    select:
    <select v-model="selected">
        <option selected disabled>----请选择----</option>
        <option value="A" >A</option>
        <option value="B" >B</option>
        <option value="C" >C</option>
    </select>
    <p>上面选择了谁：{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      el: "#app",
      data: {
          message: ""
      }
  })

  var vm1 = new Vue({
      el: "#app1",
      data: {
          message: ""
      }
  })

  var vm2 = new Vue({
      el: "#app2",
      data: {
          checked: ""
      }
  })

  var vm3 = new Vue({
      el: "#app3",
      data: {
          selected: ""
      }
  })

</script>
</body>
</html>